<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/vue.global.js"></script>
</head>
<body>
  <div id="root">
    <!-- {{ title }} -->
    {{ count }} - {{ data.title }}
  </div>
</body>
<script type="module">
  const { createApp, reactive, ref, onMounted } = window.Vue
  const app = createApp({
    setup(props) {
      // const data = reactive({
      //   title: 'hello'
      // })
      // return data


      // ref：ref数据响应式监听。ref 函数传入一个值作为参数，一般传入基本数据类型，返回一个基于该值的
      // 响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过
      // 修改 count.value 的值，可以触发模板的重新渲染，显示最新的值

      // reactive：reactive是用来定义更加复杂的数据类型，但是定义后里面的变量取出来就不在是响应式Ref对象数据了
      const count = ref(100)
      const data = reactive({
        title: 'hi'
      })

      onMounted(() => {
        data.title = 'hello'
      })
      return {
        count,
        data
      }
    }
  })

  app.mount('#root')
</script>
</html>